<template>
  <div>
      <el-card>
          <!-- 卡片区域 -->
          <h1>设备归还</h1>
          <!-- 用户区域 -->

          <el-table :data="userList.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )" border stripe>
            <el-table-column label="借用编号" prop="equipment_id" width="250px"></el-table-column>
            <el-table-column label="借用日期" prop="updated_at"></el-table-column>
            <el-table-column label="借用人" prop="equipment_name"></el-table-column>
            <el-table-column label="数量" prop="number"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- 归还设备 -->
                    <el-button
                    type="primary"
                    @click="backequipment(scope.row)"
            >归还设备</el-button>
                </template>
            </el-table-column>
          </el-table>
           <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[6,8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>


      </el-card>

      <!--归还设备的对话框 -->
    <el-dialog
      title="信息填写"
      :visible.sync="backDialogVisible"
      width="30%"
    >
      <!-- 内容主题区 -->
      <el-form
        label-width="70px"
        :model="backForm"
      >
        <el-form-item label="设备状况" prop="info">
          <el-input v-model="backForm.info" disabled></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="surebackquipment()">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.getuserlist()
  },
    data() {
        return {
          //分页
      currentPage: 1,
      pageSize: 6,
         userList: [],
        total:0,
        backDialogVisible:false,
        backForm: {
            info:'',
            id:''
        }
    }
    },
    methods: {
          async getuserlist() {
          const {data: res} = await this.$http.get('/api/student/selectreturnequipment')
          console.log(res);
          if (res.code == 200){
            this.$message.success('查看归还设备成功！')
            this.userList = res.data
            this.total = res.data.length
          }
          if (res.code == 100){
            this.$message.error('存入失败！')
          }
          },
          backequipment(id) {
            console.log(id);
            this.backDialogVisible = true
             this.backForm.id = id.equipment_id
            this.backForm.info = id.annex
          },
         async surebackquipment() {
           const{data: res} = await this.$http.post('/api/student/returnequipment',{info:this.backForm.info,equipment_id:this.backForm.id})
            console.log(res);
            if(res.code !== 200) return this.$message.error('归还设备失败！')
        this.$message.success('归还设备成功！')
        this.backDialogVisible = false
          },
         handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
    }
   
}
</script>

<style scoped>
.el-pagination {
    white-space: nowrap;
    color: #303133;
    font-weight: 700;
    text-align: center;
    margin-top: 15px;
}
</style>